<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <script src="../js/jquery/2.0.0/jquery.min.js"></script>
    <link href="../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="../js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <script src="../js/vue.min.js"></script>
    <script src="../js/fetch.min.js"></script>
    <link href="../css/back/style.css" rel="stylesheet">
    <script>
        function del(e) {
            var id = $(e).attr('id');
            console.log(id);
            let page = "../admin_examInfo_delete?id=" + id;
            if (confirm("确定要删除") === true) {
                $.get(page);
                return true;
            } else
                return false;
        }

        function jump(e) {
            let name = e.parentNode.className;
            console.log(name);
            if (name === "disabled" || name === "current") {
                return false;
            }
            else
                return true;
        }
    </script>
    <title>八方驾校</title>
</head>
<body>
<div id="allContent">
    <div>
        <table width="100%">
            <tbody>
            <tr height="30px">
                <td width="200px">
                    <img class="primary" title="八方驾校" src="../img/car1.png">
                    <img class="primary" title="八方驾校" src="../img/car.png">
                    <img class="primary" title="八方驾校" src="../img/car1.png">
                </td>
                <td align="left" width="240px">
                    <div class="search">
                        <form action="11" method="post">
                            <button class="btn btn-default" type="button">
                                <span class="glyphicon glyphicon-search"></span>
                            </button>
                            <input name="1" class="form-control" placeholder="搜索..">
                        </form>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <nav>
        <div class="nav bg-primary">
			<span class="pull-left">
                <a href="#nowhere">后台管理</a>
			</span>

        </div>
    </nav>
    <br>
    <table width="100%" class="allTable">
        <tbody>
        <tr valign="top">
            <td width="145px" style="padding-left:20px">
                <nav>
                    <div style="margin-left:00px;width:170px">
                        <a href="#nowhere"
                           class="list-group-item success_bg leftKnowledgeMenuWholeTitle">
                            <h2>所有成员</h2>
                        </a>
                        <a href="listCoach.html"
                           class="leftKnowledgeMenuItem list-group-item knowledgeBar finish_ready">
                            <span>教练</span>
                        </a>
                        <a href="listStudent.html?schedule=1"
                           class="leftKnowledgeMenuItem list-group-item knowledgeBar finish_ready">
                            <span>科目一</span>
                        </a>

                        <a href="listStudent.html?schedule=2"
                           class="leftKnowledgeMenuItem list-group-item knowledgeBar unread_ready">
                            <span>科目二</span>
                        </a>

                        <a href="listStudent.html?schedule=3"
                           class="leftKnowledgeMenuItem list-group-item knowledgeBar unread_ready">
                            <span>科目三</span>
                        </a>
                        <a href="listStudent.html?schedule=4"
                           class="leftKnowledgeMenuItem list-group-item knowledgeBar unread_ready">
                            <span>科目四</span>
                        </a>
                        <a href="listArticle.html"
                           class="leftKnowledgeMenuItem list-group-item knowledgeBar unread_ready">
                            <span>文章</span>
                        </a>
                        <a href="listExamInfo.html"
                           class="leftKnowledgeMenuItem list-group-item knowledgeBar unread_ready active">
                            <span>考试信息</span>
                        </a>
                    </div>
                </nav>
            </td>

            <td align="left" style="padding-left:60px;padding-right:40px">
                <nav>
                    <div class="panel panel-success">
                        <div class="panel-heading">
                            <div class="text-uppercase">
                                <span><font color="#337ab7">总共{{page.total}}条</font></span>
                            </div>
                        </div>
                    </div>
                </nav>

                <div class="workingArea">

                    <div id="listDataTableDiv" class="listDataTableDiv">
                        <table class="table table-striped table-bordered table-hover  table-condensed">
                            <thead>
                            <tr class="success">
                                <th>时间</th>
                                <th>地点</th>
                                <th>车型</th>
                                <th>考试类型</th>
                                <th>编辑</th>
                                <th>删除</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="e in es">
                                <td>{{e.date_}}</td>
                                <td>{{e.place}}</td>
                                <td>{{e.carModel}}</td>
                                <td>{{e.type_}}</td>
                                <td><a :href="'admin_examInfo_edit.html?id=' + e.id"><span class="glyphicon glyphicon-edit"></span></a></td>
                                <td><a :id="e.id" :href="'listExamInfo.html?start=' + page.start"
                                       onclick="return del(this)"
                                       class="glyphicon glyphicon-trash"></a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <div class="pageDiv">
                            <nav>
                                <ul class="pagination">
                                    <li :class="page.hasPrevious ? 'w' : 'disabled' ">
                                        <a href="listExamInfo.html?start=0" onclick="return jump(this)">
                                            <span>&laquo;</span>
                                        </a>
                                    </li>

                                    <li :class="page.hasPrevious ? 'w' : 'disabled' ">
                                        <a :href="'listExamInfo.html?start='+ (page.start-page.count)"
                                           onclick="return jump(this)">
                                            <span>&lsaquo;</span>
                                        </a>
                                    </li>

                                    <li v-for="i in page.totalPage"
                                        :class="((i-1)*page.count)==page.start ? 'disabled' : 'w' ">
                                        <a v-if="i*page.count-page.start<=20 && i*page.count-page.start>=-10"
                                           :href="'listExamInfo.html?start=' + (i-1)*page.count"
                                           :class="(i-1)*page.count==page.start ? 'current' : 'fa' "
                                           onclick="return jump(this)">
                                            <span>{{i}}</span>
                                        </a>
                                    </li>
                                    <li :class="page.hasNext ? 'w' : 'disabled' ">
                                        <a :href="'listExamInfo.html?start='+ (page.start+page.count)"
                                           onclick="return jump(this)">
                                            <span>&rsaquo;</span>
                                        </a>
                                    </li>
                                    <li :class="page.hasNext ? 'w' : 'disabled' ">
                                        <a :href="'listExamInfo.html?start=' + page.last" onclick="return jump(this)">
                                            <span>&raquo;</span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="panel panel-warning addDiv" style="height: 300px; width: 500px">
        <div class="panel-heading">新增考试</div>
        <div class="panel-body">
            <form method="post" id="addForm" action="../admin_examInfo_add" enctype="multipart/form-data">
                <table class="addTable">
                    <tbody>
                    <tr>
                        <td>时间</td>
                        <td>
                            <label>
                                <input type="datetime-local" class="form-control" name="dateStr" required>
                            </label>
                        </td>
                    </tr>
                    <tr>
                        <td>地点</td>
                        <td>
                            <label>
                                <input type="text" class="form-control" name="place" required>
                            </label>
                        </td>
                    </tr>
                    <tr>
                        <td>车型</td>
                        <td>
                            <label>
                                <select name="carModel" class="form-control">
                                    <option value="A1">A1</option>
                                    <option value="A2">A2</option>
                                    <option value="A3">A3</option>
                                    <option value="B1">B1</option>
                                    <option value="B2">B2</option>
                                    <option value="C1" selected>C1</option>
                                    <option value="C2">C2</option>
                                    <option value="C3">C3</option>
                                    <option value="C4">C4</option>
                                </select>
                            </label>
                        </td>
                    </tr>
                    <tr>
                        <td>考试类型</td>
                        <td>
                            <label>
                                <select name="type" class="form-control">
                                    <option value="1">科目一</option>
                                    <option value="2">科目二</option>
                                    <option value="3">科目三</option>
                                    <option value="4">科目四</option>
                                </select>
                            </label>
                        </td>
                    </tr>
                    <tr class="submitTR">
                        <td colspan="2" align="center">
                            <button type="submit" class="btn btn-success">提 交</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </form>
        </div>
    </div>
    <div class="push"></div>
</div>

<div class="footer">
    <footer class="footer" id="footer">
        © 2015-2018 <a href="http://bf.cn">bf.cn</a> — All Rights Reserved. 蜀ICP备15000533号
        <a href="#nowhere">八方后台管理系统</a>
        | <a href="#nowhere">关于本站</a>
    </footer>
</div>

<script>
    let url = "../admin_examInfo_list";
    new Vue({
        el: '#allContent',
        data: {
            es: [],
            page: []
        },
        mounted: function () {
            self = this;
            url += decodeURI(location.search);
            fetch(url).then(function (response) {
                response.json().then(function (jsonObject) {
                    self.es = jsonObject.es;
                    self.page = jsonObject.page;
                    console.log(self.es);
                }).catch(function (err) {
                    console.log("Fetch错误：" + err);
                })
            })
        }
    });
</script>
</body>
</html>